<template>
  <div>
    <div class="mb-[10px]">
      <el-card>
        <el-form
          ref="queryFormRef"
          :model="queryParams"
          :inline="true"
          label-width="auto"
        >
          <el-form-item
            label="创建时间"
          >
            <el-date-picker
              v-model="dateRange"
              value-format="YYYY-MM-DD"
              type="daterange"
              range-separator="-"
              start-placeholder="开始日期"
              end-placeholder="结束日期"
              style="width: 240px"
            ></el-date-picker>
          </el-form-item>         
          <el-form-item
            label="用工姓名"
            prop="workName"
          >
            <el-input
              v-model="queryParams.workName"
              placeholder="请输入用工姓名"
              clearable
              style="width: 240px"
              @keyup.enter="handleQuery"
            />
          </el-form-item>
          <el-form-item
            label="身份证号"
            prop="workIdCard"
          >
            <el-input
              v-model="queryParams.workIdCard"
              placeholder="请输入身份证号"
              clearable
              style="width: 240px"
              @keyup.enter="handleQuery"
            />
          </el-form-item>
          <el-form-item
            label="手机号码"
            prop="workPhone"
          >
            <el-input
              v-model="queryParams.workPhone"
              placeholder="请输入手机号码"
              clearable
              style="width: 240px"
              @keyup.enter="handleQuery"
            />
          </el-form-item>          
          <el-form-item>
            <el-button
              type="primary"
              @click="handleQuery"
              icon="Search"
            >查询</el-button>
            <el-button
              @click="resetQuery"
              icon="Refresh"
            >重置</el-button>
          </el-form-item>
        </el-form>
      </el-card>
    </div>
    <el-card>      
      <el-table
        v-loading="loading"
        :data="customerImportList"
        border
        :row-key="getRowKeyService"
        @select="getSelectServiceFun"
        @select-all="handleSelectionServiceAll"
      >
        <el-table-column
          v-hasRoles="['service']"
          type="selection"
          width="40"
          align="center"
          column-key="workId"
          :reserve-selection="true"
        />
        <el-table-column
          label="创建时间"
          align="center"
          min-width="160"
          prop="createTime"
          sortable
        />
        <el-table-column
          label="用工姓名"
          align="center"
          min-width="120"
          prop="name"
          :show-overflow-tooltip="true"
        />
        <el-table-column
          label="身份证号"
          align="center"
          min-width="160"
          prop="cardId"
          :show-overflow-tooltip="true"
        />
        <el-table-column
          label="手机号"
          align="center"
          min-width="120"
          prop="phoneNoHide"
        />
        <el-table-column
          label="身份证反面"
          align="center"
          min-width="180"
        >
        <template #default="scope">          
          <span>{{scope.row.cardPositive&&scope.row.cardBack?'是':'否'}}</span>
        </template>
        </el-table-column>        
        <el-table-column
          label="实名状态"
          align="center"
          min-width="180"          
        >
        <template #default="scope">
          <span>{{scope.row.isAuth == 1?'已实名':'未实名'}}</span>
        </template>
        </el-table-column>     
        <el-table-column
          label="操作"
          fixed="right"
          align="center"
          :width="checkRole([7,6])?'240':checkRole(9)?'120':'120'"
          class-name="small-padding fixed-width"
        >
          <template #default="scope">
            <el-tag
              v-if="checkRole(8)"
              link
              type="primary"
              @click="jumpPage('memberDetail?id='+scope.row.id+'&workId='+scope.row.workId)"
            >会员信息</el-tag>
            <el-tag
              link
              type="primary"
              v-if="checkRole(5,7,8)"
              @click="addAndEditContract('look',scope.row)"
            >详情</el-tag>
            <el-tag
              v-if="checkRole(7,9)"
              link
              type="primary"
              @click="lookSetCardShow(scope.row.workId)"
            >查看结算卡</el-tag>
            <el-tag
              v-if="checkRole(5,7,9)"
              link
              :type="checkRole(7,9)?'warning':'primary'"
              @click="infoDialogShowFun(scope.row)"
            >信息修改</el-tag>
            <el-tag
              v-if="checkRole(8) && scope.row.cardPositive"
              type="primary"
              link
              @click="downCardId(scope.row)"
            >下载身份证</el-tag>
          </template>
        </el-table-column>
      </el-table>
      <pagination
        v-show="total > 0"
        :total="total"
        v-model:page="queryParams.pageNum"
        v-model:limit="queryParams.pageSize"
        @pagination="getList"
      />
    </el-card>
    <!-- 用工签约 -->
    <employmentContract ref="employmentContractRef" @getList="getList"></employmentContract>
    <!-- 添加用工人员 -->
    <addEmployees ref="addEmployeesRef" @getList="getList"></addEmployees>
    <!-- 查看结算卡 -->
    <lookSetCard ref="lookSetCardRef" ></lookSetCard>
    <!-- 信息修改 -->
    <infoEdit ref="infoEditRef" @getList="getList"></infoEdit>
  </div>
</template>

<script setup name="signTable" lang="ts">
import { checkRole } from '@/utils/permission'; // 权限判断函数
import api from '@/api/workMag/customerImport';
import { CustomerImportQuery, CustomerImportVO, DownloadListQuery, OperVo } from '@/api/workMag/customerImport/types';
import employmentContract from './employmentContract.vue';
import addEmployees from './addEmployees.vue';
import lookSetCard from './lookSetCard.vue';
import infoEdit from './infoEditCustomerImport.vue';
import useUserStore from '@/store/modules/user';
const router = useRouter();
const { proxy } = getCurrentInstance() as ComponentInternalInstance;

const { wxfe_bus_type, sign_status } = toRefs<any>(proxy?.useDict('wxfe_bus_type', 'sign_status'));

const customerImportList = ref<CustomerImportVO[]>();
const loading = ref(true);
const total = ref(0);
const dateRange = ref<[DateModelType, DateModelType]>(['', '']);
const queryFormRef = ref<ElFormInstance>();
const queryParams = ref<CustomerImportQuery>({
  pageNum: 1,
  pageSize: 10,
  startTime: '',
  endTime: '',
  busMerName: '',
  workName: '',
  workIdCard: '',
  workPhone: '',
  merId:null,
  sydId:null,
  busType: '',
  signStatus: ''
});

/** 签约查询列表 */
const getList = async () => {
  loading.value = true;
  const res = await api.customerImportList(proxy?.addDateRange(queryParams.value, dateRange.value));
  loading.value = false;
  customerImportList.value = res.rows;
  total.value = res.total;
};

/** 搜索按钮操作 */
const handleQuery = () => {
  queryParams.value.pageNum = 1;
  getList();
};
/** 重置按钮操作 */
const resetQuery = () => {
  dateRange.value = ['', ''];
  queryFormRef.value?.resetFields();
  queryParams.value.pageNum = 1;
  handleQuery();
};

/** 新增&修改 */
const addAndEditContract = (type: string, row: any = '') => {
  router.push(type == 'look' ? 'customerImportMemberDetail?id=' + row.id : '');
};
const jumpPage = (url: string) => {
  router.push(url);
};

onMounted(() => {
 let curRoleId = useUserStore().curRoleId;
 if(curRoleId == 9){
   queryParams.value.merId = useUserStore().defaultProvider.merId;
   queryParams.value.merNo = useUserStore().defaultProvider.merNo;
   queryParams.value.sydId = useUserStore().defaultProvider.sydId;
   queryParams.value.sydNo = useUserStore().defaultProvider.sydNo;
 }
  getList(); // 初始化列表数据
});
onUnmounted(() => {
  clearInterval(timer.value);
  timer.value = null;
});

// 导出
const employmentContractExportFun = async () => {
  proxy?.download(
    '/payment/workerBusiness/export',
    proxy?.addDateRange(queryParams.value, dateRange.value),
    `会员签约列表_${new Date().getTime()}.xlsx`
  );
};
// 下载个人身份信息
const timer = ref<any>(null);
const CountdownStart = ref<boolean>(false);
const Countdown = ref<number>(59);

const downCheckCardId = async () => {
  CountdownStart.value = true;
  timer.value = setInterval(() => {
    Countdown.value = Countdown.value - 1;
    console.log(1);

    if (Countdown.value <= 0) {
      clearInterval(timer.value);
      timer.value = null;
      Countdown.value = 59;
      CountdownStart.value = false;
    }
  }, 1000);
  if (!checkLineService.value?.length) return ElMessage.error('请选择要下载的客户！');
  let workIds: Array<string | number> = [];
  checkLineService.value.forEach((e) => {
    workIds.push(e.workId);
  });
  const res = await api.exportMutiCardImg(workIds.toString());
  ElMessage.success('下载申请已提交，请至下载暂存区查看');
  // proxy?.download('payment/workerBusiness/exportMutiCardImg', { workIds: workIds.toString() }, `123.zip`);
};

// table 选择行
const getRowKeyService = (row: any) => {
  return row.workId;
};
let checkLineService = ref<OperVo[]>();

const getSelectServiceFun = (data: any, row: any) => {
  checkLineService.value = data;
};

// 多选事件
const handleSelectionServiceAll = (objs: any) => {
  console.log(objs);
  checkLineService.value = JSON.parse(JSON.stringify(objs));
};

// 下载身份证
const downCardId = async (row: CustomerImportVO) => {
  proxy?.download('payment/workerBusiness/exportCardImg', { workId: row.workId }, `${row.workName}.zip`);
};

// 用工签约
const employmentContractRef = ref<any>();
const employmentContractFun = async () => {
  employmentContractRef.value.employmentContractFun();
};
// 添加用工人员
const addEmployeesRef = ref<any>();
const addEmployeesVisibleShow = async () => {
  addEmployeesRef.value.addEmployeesVisibleFun();
};

// 查看结算卡
const lookSetCardRef = ref<any>();
const lookSetCardShow = async (workId: string | number) => {
  lookSetCardRef.value.lookSetCard(workId);
};
// 信息修改
const infoEditRef = ref<any>();
const infoDialogShowFun = async (row: CustomerImportVO) => {
  infoEditRef.value.infoDialogShowFun(row);
};

defineExpose({
  getList
});
</script>

<style lang="scss" scoped>
</style>
